<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
              placeholder="请输入手机号码搜索"
              class="input-with-select"
              v-model="queryInfo.mobile"
              clearable
              @clear="getFeedbackList"/>
        </el-col>
        <el-col :span="3"><el-button type="primary" @click="getFeedbackList">搜索</el-button></el-col>
      </el-row>

      <el-table :data="feedbackList" border stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="手机" prop="mobile"></el-table-column>
        <el-table-column label="内容" prop="content"></el-table-column>
        <el-table-column label="时间" prop="addTime"></el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNo"
          :page-sizes="[5, 10, 20]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>


  </div>
</template>

<script>
import Api from "@/api/Api.js";
export default {
  data() {
    return {
      // 查询用户列表的参数对象
      queryInfo: {
        mobile: "",
        pageNo: 1, // 页码
        pageSize: 20, // 页大小
      },
      feedbackList: [],
      total: 0,
    };
  },
  created() {
    this.getFeedbackList();
  },
  methods: {
    getFeedbackList() {
      Api.getFeedbackList(this.queryInfo).then((res) => {
        if (res.success) {
          this.feedbackList = res.data.records;
          this.total = res.data.total;
        } else {
          return this.$message.error("获取失败");
        }
      });
    },
    handleSizeChange(pageSize) {
      this.queryInfo.pageSize = pageSize;
      this.getUsegetFeedbackListrList();
    },
    handleCurrentChange(pageNo) {
      this.queryInfo.pageNo = pageNo;
      this.getFeedbackList();
    }
  }
};
</script>

<style lang="less" scoped>
.logo_pic {
  max-width: 100px;
}
</style>
